<!--
 * @Author: 吴世扬 18368095041@163.com
 * @Date: 2024-07-26 11:47:18
 * @LastEditors: 吴世扬 18368095041@163.com
 * @LastEditTime: 2024-08-22 17:57:37
 * @FilePath: /vue3-uniapp/src/pages/tabbar/MineView/components/CellView/CellView.vue
-->
<script lang="ts" setup>
import type { PickerValueType } from '@tuniao/tnui-vue3-uniapp/components/picker/src/picker';

import { ColorConfig } from '@/store/modules/theme';
import { useUserStore, useAppStore } from '@/store';
import { notifyAreaEsListChange } from '@/service/useMy';

const appStore = useAppStore();
const userStore = useUserStore();
const showThemeModeList = ref(false);
const themeModeList = [
    {
        value: 'default',
        label: '默认'
    },
    {
        value: 'dark',
        label: '暗黑'
    }
];

const { themeMode, theme } = storeToRefs(appStore);
const { token, currentRoleId, currentRole, roleList } = storeToRefs(userStore);

const isLogin = computed(() => {
    return !!token.value;
});

const goPage = (url: string) => {
    uni.$uv.route({
        url
    });
};

const showRoleList = ref(false);

const handleRolePickerConfirm = async (value: PickerValueType) => {
    const item = roleList.value.find((item) => item.value === value);
    if (item) {
        await userStore.switchRole(item.value);
        notifyAreaEsListChange({
            current: 1,
            size: 20
        });
    }
    showRoleList.value = false;
};

const listItemStyle = {
    backgroundColor: 'var(--bg-front)',
    borderBottom: '1rpx solid var(--c-border)'
};

const primaryColor = ref('');

const setThemePrimary = (color: string) => {
    const theme = new ColorConfig();
    theme.color.primary.default = color;
    appStore.setTheme(theme);
};
</script>

<template>
    <view class="cellview-container mt-[40rpx]" v-if="isLogin">
        <TnListItem
            @click="() => goPage('/packageCommon/pages/draft/index')"
            :custom-style="listItemStyle"
            right-icon="right"
        >
            <text class="c-text">草稿箱</text>
        </TnListItem>
        <TnListItem
            @click="() => goPage('/packageCommon/pages/userInfo/index')"
            :custom-style="listItemStyle"
            right-icon="right"
            ><text class="c-text">我的信息</text>
        </TnListItem>
        <TnListItem
            @click="() => goPage('/packageUser/pages/checkin/AreaList/index')"
            right-icon="right"
            :custom-style="listItemStyle"
        >
            <text class="c-text">辖区签到记录</text>
        </TnListItem>

        <TnListItem
            @click="() => goPage('/packageUser/pages/checkin/RecordList/index')"
            right-icon="right"
            :custom-style="listItemStyle"
            ><text class="c-text">我的签到记录</text>
        </TnListItem>

        <TnListItem
            @click="() => (showRoleList = true)"
            right-icon="right"
            :custom-style="listItemStyle"
        >
            <view class="flex flex-row items-center justify-between">
                <text class="c-text">设置当前角色</text>
                <text class="c-text2">{{ currentRole?.name || '' }}</text>
            </view>
        </TnListItem>

        <TnListItem
            @click="() => goPage('/packageCommon/pages/password/index')"
            right-icon="right"
            :custom-style="listItemStyle"
            ><text class="c-text">修改密码</text></TnListItem
        >

        <TnListItem
            @click="() => (showThemeModeList = true)"
            right-icon="right"
            :custom-style="listItemStyle"
        >
            <view class="flex flex-row items-center justify-between">
                <text class="c-text">模式</text>
                <text class="c-text2">{{
                    themeMode === 'default' ? '默认' : '暗黑'
                }}</text>
            </view>
        </TnListItem>

        <TnListItem
            right-icon="right"
            custom-class="bg-front"
            :custom-style="{
                ...listItemStyle,
                ...{
                    borderBottom: undefined
                }
            }"
        >
            <view class="flex flex-row items-center justify-between">
                <text class="c-text">主题色</text>
                <TnColorSelect
                    :model-value="theme?.color.primary.default"
                    :size="'40rpx'"
                    @update:model-value="setThemePrimary"
                />
            </view>
        </TnListItem>

        <TnPicker
            :model-value="currentRoleId"
            v-model:open="showRoleList"
            @confirm="handleRolePickerConfirm"
            :data="roleList"
        />

        <TnPicker
            :model-value="themeMode"
            v-model:open="showThemeModeList"
            @confirm="
                (value: string) =>
                    appStore.setThemeMode(value as 'default' | 'dark')
            "
            :data="themeModeList"
        />
    </view>
</template>

<style lang="scss" scoped>
.cellview-container {
}
</style>
